<template>
	<view class="container write-off-detail-container">

		<view class="other-main">
			<view>
				<view class="coupon-top">
					<view>
						<view class="top-title">优惠劵编码</view>
						<view class="top-info">{{couponInfo.couponCode}}</view>
					</view>
					<view class="c-danger" style="text-align: right;">
						<view>
							<text class="top-unit">¥</text>
							<text class="top-price">{{$toYuan(couponInfo.couponMoney)}}</text>
						</view>
						<view class="top-tips">满{{$toYuan(couponInfo.minAmount)}}可用</view>
					</view>
				</view>
				<view>
					<view class='coupon-info'>
						<text class="coupon-info-title">用户账号：</text>
						<text class="coupon-info-word">{{couponInfo.userName}}</text>
					</view>
					<view class='coupon-info'>
						<text class="coupon-info-title">优惠劵名称：</text>
						<text class="coupon-info-word">{{couponInfo.couponName}}</text>
					</view>
					<view class='coupon-info'>
						<text class="coupon-info-title">使用条件：</text>
						<text class="coupon-info-word">满{{$toYuan(couponInfo.minAmount)}}元,优惠{{$toYuan(couponInfo.couponMoney)}}元</text>
					</view>
					<view class='coupon-info'>
						<text class="coupon-info-title">优惠劵类型：</text>
						<text class="coupon-info-word">{{couponInfo.type}}</text>
					</view>

					<view class='coupon-info'>
						<text class="coupon-info-title">限制平台/门店：</text>
						<text class="coupon-info-word">
							<text v-for="(store,idx) in couponInfo.storeNameS" :key="store+'_'+idx">{{store}}、</text>
						</text>
					</view>
					<view class='coupon-info'>
						<text class="coupon-info-title">使用说明：</text>
						<text class="coupon-info-word">{{couponInfo.usageDescription}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script lang="ts" setup>
	import { onMounted, ref } from 'vue';
	import { onLoad } from "@dcloudio/uni-app"
	import { hideLoading, showLoading } from '../../common/util';
	import userApi from '../../common/userApi';
	let pageId = ''
	onLoad((options) => {
		pageId = options.id;
	})
	onMounted(() => {
		getCouponInfo()
	})
	const couponInfo = ref<any>({})
	const getCouponInfo = async () => {
		showLoading()
		try {
			const res = await userApi.verifyRecordsLog({
				id: pageId
			})
			couponInfo.value = res.data || {}
			console.info(res.data)
		} finally {
			hideLoading()
		}
	}
</script>


<style lang="scss">
	.write-off-detail-container {
		padding: 25rpx;
		background-color: #F2F3F8;

		.coupon-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: solid 1px #eee;
			padding: 20rpx 0;
		}

		.top-title {
			font-size: 32rpx;
			color: #202020;
			font-weight: bold;
		}

		.top-info {
			font-size: 28rpx;
			color: #222222;
			font-weight: bold;
		}

		.top-unit {
			font-size: 24rpx;
		}

		.top-price {
			font-size: 44rpx;
			font-weight: bold;
		}

		.top-tips {
			font-size: 24rpx;
		}

		.coupon-info {
			margin-top: 20rpx;
		}

		.coupon-info-title {
			font-size: 28rpx;
			color: #6D6D6D;
			display: inline-block;
			vertical-align: top;
		}

		.coupon-info-word {
			font-size: 28rpx;
			color: #222222;
			display: inline-block;
			vertical-align: top;
		}

		.other-main {
			background-color: #fff;
			border-radius: 15rpx 15rpx 0 0;

			width: 100%;
			padding: 0 20rpx 50rpx 20rpx;
			transition: all 0.3s;
		}

		.other-bottom {
			margin-top: 100rpx;
			text-align: center;

			.sure-btn {
				display: inline-flex;
				width: 200rpx;
				height: 70rpx;
				border-radius: 70rpx;
			}
		}
	}
</style>